<template>
  <div>
    <section class="tool-bar">
      <a-button type="primary" class="btn" @click="openModal">设置</a-button>
    </section>
    <ul class="dashboard">
      <li>
        <div class="label">更新时间：</div>
        <div class="content">
          <span>{{ data.time.day }}</span>日
          <span>{{ data.time.hour }}</span>时
          <span>{{ data.time.min }}</span>分
        </div>
      </li>
      <li>
        <div class="label">驱动升级方式：</div>
        <div class="content">
          <span>{{ Method2Val[data.method] }}</span>
        </div>
      </li>
    </ul>
    <modal-temp ref="modal" @submit="initData"></modal-temp>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ModalTemp } from "./components";
import { strategy } from "@/api/strategy";
import { IStrategy } from "@/model/Strategy";
import { TimesToDayHourMin } from "@/utils";
import { Method2Val } from "@/common/Enum2Val";

@Component({ name: "Strategy", components: { ModalTemp } })
export default class Strategy extends Vue {
  private Method2Val: any = Method2Val;
  private data: any = {
    time: {
      day: 0,
      hour: 0,
      min: 10
    },
    method: 0
  };

  async openModal() {
    const temp: any = this.$refs.modal;
    this.$nextTick(() => {
      temp.showModal(this.data);
    });
  }

  async initData() {
    const { data } = await strategy();
    if (data.errNo == 0) {
      const { strategy } = data.item;
      const { method, timeInterval }: IStrategy = strategy;
      if (timeInterval) {
        const [day, hour, min]: number[] = TimesToDayHourMin(timeInterval);
        this.data.time = { day, hour, min };
      }
      this.data.method = method || 0;
    }
  }

  created() {
    this.initData();
  }
}
</script>

<style lang="less" scoped>
.tool-bar {
  padding-bottom: 20px;
}
.dashboard {
  width: 500px;
  height: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  box-shadow: 0 0 5px #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  li {
    margin: 20px 0;
    display: flex;
    .label {
      font-size: 14px;
      font-weight: 700;
      width: 150px;
      text-align: right;
    }
    .content {
      span {
        margin-left: 10px;
        font-weight: bold;
      }
    }
  }
}
</style>
